<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pinusMusic</title>
    <link rel="icon" href="favicons/1.png">
    <script src="../js/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/include.js"></script>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../css/style.min.css" rel="stylesheet">
    <style>
        .audio-wrapper {
            border-radius: 35px;
            background-color: #fcfcfc;
            margin: 10px auto;
            /*max-width: 670px;*/
            width: 90%;
            height: 70px;
            border: 1px solid #e0e0e0;
            position: fixed ;
            left: 5%;
            top: 85%;
            z-index: 100;
        }

        .audio-left {
            float: left;
            text-align: center;
            width: 15%;
            height: 100%;
        }

        .audio-left img {
            width: 40px;
            position: relative;
            top: 15px;
            margin: 0;
            display: initial; /* 解除与app的样式冲突 */
            cursor: pointer;
        }

        .audio-right {
            margin-right: 2%;
            float: right;
            width: 80%;
            height: 100%;
        }

        .audio-right p {
            font-size: 15px;
            height: 35%;
            margin: 8px 0;
            /* 歌曲名称只显示在一行，超出部分显示为省略号
               */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 243px;
            /*
               要适配小屏幕手机，所以最大宽度先设小一点，后面js根据屏幕大小重新设置 */
        }

        .progress-bar-bg {
            background-color: #d9d9d9;
            position: relative;
            height: 4px;
            cursor: pointer;
        }

        .progress-bar {
            background-color: #33cabb;
            width: 0;
            height: 4px;
        }

        .progress-bar-bg span {
            content: " ";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            background-color: #33cabb;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -5px;
            margin-left: -5px;
            cursor: pointer;
        }

        .audio-time {
            overflow: hidden;
            margin-top: -1px;
        }

        .audio-length-total {
            float: right;
            font-size: 12px;
        }

        .audio-length-current {
            float: left;
            font-size: 12px;
        }
    </style>

</head>
<body>

<div id="header">

</div>
<div id="audio">

</div>
<!-- 歌曲列表 -->
<div class="main">
    <div class="main-inner">
        <div style="margin: 50px 0 ">
            <img id="listImg" style="width: 200px;">
            <span id="listName" style="vertical-align: bottom;font-size: 35px;margin-left: 20px"></span>
        </div>
        <table class="table table-striped table-hover">
            <thead>
            <tr>
                <th></th>
                <th>歌曲</th>
                <th>歌手</th>
                <th>收藏</th>
            </tr>
            </thead>
            <tbody id="list"></tbody>
        </table>
        <ul class="pagination" id="pageUl">
        </ul>
        </div>
    </div>
</div>

<!-- footer -->
<div id="footer"></div>
<!-- 播放器 -->
<!-- 分享到 -->
<ul class="slider-share">
    <li><a href="#">
        <i class="icon-sprite icon-add"></i>
        添加到
        <i class="icon-sprite icon-arrow"></i>
    </a></li>
    <li><a href="#">
        <i class="icon-sprite icon-share"></i>
        分享
        <i class="icon-sprite icon-arrow"></i>
    </a></li>
    <li><a href="#">
        <i class="icon-sprite icon-download"></i>
        下载
    </a></li>
</ul>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="../js/main.min.js"></script>
<script src="../js/getParameter.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="js/usermusic.js"></script>
</body>
<script>
    $(function () {
        var mlid = getParameter("mlid");
        $.post("/music/musicList/getOne",{mlid:mlid},function (data) {
            console.log(data);
            $("#listImg").attr("src","../"+data.musiclistimg);
            $("#listName").html(data.musiclistname);
        })
    })
</script>
</html>